import React from 'react';
import {
  Modal,
  Form,
  Input,
  DatePicker,
  Select,
  Row,
  Col,
} from 'antd';

const { TextArea } = Input;
const { Option } = Select;

const EventFormModal = ({
  visible,
  onCancel,
  onOk,
  editingEvent,
  form,
}) => {
  const eventTypes = ['演出', '排练', '录音', '其他'];

  const memberOptions = [
    { value: '张三', label: '张三 (主唱)' },
    { value: '李四', label: '李四 (吉他)' },
    { value: '王五', label: '王五 (贝斯)' },
    { value: '赵六', label: '赵六 (鼓手)' },
    { value: '钱七', label: '钱七 (键盘)' },
  ];

  const handleModalOk = () => {
    form.validateFields().then(values => {
      const eventData = {
        ...values,
        key: editingEvent ? editingEvent.key : Date.now().toString(),
        songs: editingEvent ? editingEvent.songs : [],
      };

      onOk(eventData);
    });
  };

  return (
    <Modal
      title={editingEvent ? '编辑活动' : '创建活动'}
      visible={visible}
      onOk={handleModalOk}
      onCancel={onCancel}
      width={800}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={editingEvent || {}}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="活动名称"
              name="title"
              rules={[{ required: true, message: '请输入活动名称' }]}
            >
              <Input placeholder="请输入活动名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="活动类型"
              name="type"
              rules={[{ required: true, message: '请选择活动类型' }]}
            >
              <Select placeholder="请选择活动类型">
                {eventTypes.map(type => (
                  <Option key={type} value={type}>{type}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="活动日期"
              name="date"
              rules={[{ required: true, message: '请选择活动日期' }]}
            >
              <DatePicker style={{ width: '100%' }} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="活动时间"
              name="time"
              rules={[{ required: true, message: '请选择活动时间' }]}
            >
              <Input placeholder="例如: 19:00" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="活动地点"
              name="location"
              rules={[{ required: true, message: '请输入活动地点' }]}
            >
              <Input placeholder="请输入活动地点" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="活动状态"
              name="status"
              rules={[{ required: true, message: '请选择活动状态' }]}
            >
              <Select placeholder="请选择活动状态">
                <Option value="upcoming">即将开始</Option>
                <Option value="completed">已完成</Option>
                <Option value="cancelled">已取消</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
          label="参与成员"
          name="members"
          rules={[{ required: true, message: '请选择参与成员' }]}
        >
          <Select
            mode="multiple"
            placeholder="请选择参与成员"
            options={memberOptions}
          />
        </Form.Item>
        <Form.Item
          label="活动描述"
          name="description"
        >
          <TextArea rows={4} placeholder="请输入活动描述" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EventFormModal; 